<template>
    <el-card style="max-width: 1600px">
        <el-row>
            <el-col :span="5">
                <img :src="Binds.coverImg" alt="" style="width: 200px;height: 200px;">
            </el-col>
            <el-col :span="12">
                <table>
                    <tbody>
                        <tr>
                            <td>
                                <h2>{{ Binds.prodName }}</h2>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                生产批次:{{ Binds.productuin }}
                            </td>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <td>
                                保质期:{{ Binds.dayNum }}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                生产许可证号:{{ Binds.productuinIcode }}
                            </td>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <td>
                                生产企业:{{ Binds.enterprises }}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <h3>产品检验报告</h3>
                                <br>
                                <el-upload v-model:file-list="fileList"
                                    action="http://localhost:27167/api/Shops/ProduQueryImg" list-type="picture-card"
                                    :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                                    @change="handleChange">
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                </el-upload>

                            </td>
                        </tr>
                    </tbody>
                </table>
            </el-col>
        </el-row>
        <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>

    </el-card>
    <el-card style="max-width: 1600px;margin-top: 20px">
        <nav>
            <RouterLink :to="{ path: '/cultivation', query: { productuin: routes } }">养殖信息</RouterLink>&nbsp;&nbsp;
            <RouterLink :to="{ path: '/slaughter', query: { productuin: routes } }">屠宰信息</RouterLink>&nbsp;&nbsp;
            <RouterLink :to="{ path: '/Processing', query: { productuin: routes } }">深加工信息</RouterLink>
        </nav>
        <RouterView />
    </el-card>

</template>


<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { RouterLink, RouterView } from 'vue-router'
import { useRoute } from 'vue-router';
import { Traceab } from '@/Http/http'
import { ElMessage, type UploadProps, type UploadUserFile } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
const route = useRoute();
let routes = route.query.productuin

const Binds = ref<any>([])

const GetProduct = () => {
    Traceab.get("/api/Shops/ProductFt", {
        params: {
            productuin: routes
        }
    }).then(res => {
        Binds.value = res.data.data;
    })
}

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    // console.log(uploadFile, uploadFiles)
}
const fileList = ref<UploadUserFile[]>([

])

const Getimg = () => {
    Traceab.get("/api/Shops/ImgQuery", {
        params: {
            name: "产品检验",
            Productuins: route.query.productuin
        }
    }).then(res => {
        if (res.data.data.length > 0) {
            for (let i = 0; i <= res.data.data.length; i++) {
                fileList.value.push({
                    uid: 0,
                    name: "",
                    url: "",
                })
                i++;
            }


        }
        res.data.data.forEach((c: any, index: number) => {
            fileList.value[index].url = c.imgUrl
        });

        console.log(res.data.data)
    })
}

const dialogImageUrl = ref("")
const dialogVisible = ref(false)
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!  // 这里获取图片地址
    dialogVisible.value = true
    console.log(dialogImageUrl.value)

}
const datapsf = ref({
    "imgId": 0,
    "name": "产品检验",
    "imgUrl": "",
    "productuins": ""
})

const handleChange: UploadProps['onChange'] = (uploadFile) => {
    debugger
    let a = ""
    let con = 0;
    // 获取新添加图片的地址
    if (uploadFile.status === 'success' && uploadFile.response) {
        // 本地文件的临时地址
        const localUrl = <any>(uploadFile.response)
        console.log('本地临时地址:', localUrl)
        a = localUrl
        datapsf.value.imgUrl = a.substring(5)
        datapsf.value.productuins = route.query.productuin
        Traceab.post("/api/Shops/ImgInforCreate", {
            data: datapsf.value
        }).then(res => {
            if (res.data.code == 100) {
                ElMessage.success("上传图片成功")

            }
            else {
                ElMessage.error("上传图片失败")
            }
        })
    }
}

onMounted(() => {
    GetProduct();
    Getimg();
})

</script>